<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../dist/vue.js"></script>
</head>
<body>
    <!-- 
      v-model 当成一个属性而存在：
      vue 数据双向绑定的原理就是 ：数据劫持 + 发布订阅者模式
      实现MVVM主要包含两个方面：数据的变化更新视图，视图的变化更新数据
        view更新data其实可以通过事件监听即可
        data 如何更新view : 重点是如何知道数据变了，只要知道数据变了，那么接下去的事就好处理了
      数据劫持 + 发布订阅者模式 --  data 如何更新view？
        https://www.cnblogs.com/canfoo/p/6891868.html
        1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
        2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
        3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。
    -->
    <div id="app">
        <input type="text" v-model="username" />{{username}}
    </div>
</body>
<script>
    new Vue({
      el:'#app',
      data:{
        username:'张三',
        obj: {
          a:1
        }
      },
      mounted () {
        console.log(this.obj) // vue中的对象就拥有了set 和get 方法，但对象本身是没有set 和get 方法的
      }
    })
</script>
</html>